<template>
  <div class="detail-base intelligenc">
    <div ref="mainHeight" class="bg-wt">
      <el-card header="设备信息">
        <div class="info-block">
          <div class="info-item"><h1 class="label-wt">设备名称：</h1><span>{{ baseData.deviceName }}</span></div>
          <div class="info-item"><h1 class="label-wt">设备标识码：</h1><span>{{ baseData.nodeId }}</span></div>
          <div class="info-item"><h1 class="label-wt">设备ID：</h1><span>{{ baseData.iotId }}</span></div>
          <div class="info-item"><h1 class="label-wt">所属产品：</h1><span>{{ baseData.productName }} </span></div>
          <div class="info-item"><h1 class="label-wt">密钥：</h1><span>{{ baseData.secret }} </span></div>
          <div class="info-item"><h1 class="label-wt">设备状态：</h1>
            <span>
              <span v-if="baseData.deviceStatus === 'ONLINE'" class="bt-small">在线</span>
              <span v-else-if="baseData.deviceStatus === 'OFFLINE'" class="undefinedBtn">离线</span>
              <span v-else-if="baseData.deviceStatus === 'ABNORMAL'" class="undefinedBtn">异常</span>
              <span v-else-if="baseData.deviceStatus === 'INACTIVE'" class="undefinedBtn">未激活</span>
              <span v-else class="forbidBtn">已冻结</span>
            </span>
          </div>
          <div class="info-item">
            <h1 class="label-wt">接入位置：</h1>
            <span>
              <span v-if="locationData.length === 1">{{ locationData[0] }}</span>
              <span v-if="locationData.length === 2">{{ locationData[0] }}-{{ locationData[1] }}</span>
              <span v-if="locationData.length === 3">{{ locationData[0] }}-{{ locationData[1] }}-{{ locationData[2] }}
              </span>
            </span>
          </div>
          <div class="info-item"><h1 class="label-wt">设备类型：</h1>
            <span>{{ baseData.locationType === 0 ? '随身设备' : '固定设备' }}</span>
          </div>
          <div class="info-item"><h1 class="label-wt">节点类型：</h1><span>直连设备</span></div>
          <div class="info-item"><h1 class="label-wt">认证类型：</h1><span>密钥</span></div>
          <div class="info-item"><h1 class="label-wt">创建时间：</h1><span>{{ baseData.createTime }}</span></div>
          <div class="info-item"><h1 class="label-wt">激活时间：</h1>
            <span>{{ baseData.activeTime ? baseData.activeTime : '--' }}</span></div>
        </div>
      </el-card>
    </div>

    <div ref="mainHeight" class="bg-wt min-steph height mt-24">
      <SwitchBar ref="tabBar" :data="facilityTabData" @change-id="changeId"/>
      <div v-if="activeIndex === 0">
        <div class="modelBox">
          <div class="modelL">
            <SwitchTabBar ref="tabBar" :data="modelTabData" @change-id="changeModelId"/>
            <div class="modelList">
              <ul>
                <li :class="isActive === 0 ? 'active' : ''" @click="handleActive(0)">默认模块</li>
                <li v-for="(item, index) in itemData" :key="index" :class="isActive === index + 1 ? 'active' : ''"
                    @click="handleActive(index + 1, item)">
                  <p>{{ item.functionBlockName }}</p>
                  <p>标识符：{{ item.functionBlockId }}</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="modelR">
            <el-table v-loading="loading" :data="publishedData" @selection-change="onPageChange">
              <el-table-column align="center" label="序号" type="index" width="55"/>
              <el-table-column align="center" label="标识符" prop="functionId" width="180"/>
              <el-table-column align="center" label="更新时间" prop="eventTime">
                <template #default="scope">
                  <span>{{ scope.row.eventTime ? parseTime(scope.row.eventTime, '{y}-{m}-{d} {h}:{i}:{s}') : '--' }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="数据值" prop="value" width="150">
                <template #default="scope">{{ scope.row.value }}</template>
              </el-table-column>
              <el-table-column align="center" class-name="small-padding fixed-width" fixed="right" label="操作"
                               width="200">
                <template #default="scope">
                  <el-button icon="ZoomIn" link type="primary" @click="handleDetails(scope.row)">查看数据</el-button>
                </template>
              </el-table-column>
            </el-table>

            <pagination
                v-show="pagination.total > 0"
                v-model:limit="pagination.pageSize"
                v-model:page="pagination.pageNum"
                :total="pagination.total"
                @pagination="getPropertyStatus"
            />
          </div>
        </div>
      </div>

    </div>
    <LookData
        :dialog-data="listLookData"
        :dialogVisible="dialogVisible"
        :nextValid="nextValid"
        :pagination="paginationLook"
        :preValid="preValid"
        :total="total"
        @onPage="onPage"
        @handle-search="handleLookSearch"
        @handle-close-dialog="handleCloseDialog"
        @get-list="getLookList"
    />
  </div>

</template>
<script setup>
import {onMounted, ref} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import dayjs from 'dayjs';
import {facilityTabData, modelTabData} from '@/utils/commonData';
import {getEndTimeStr, getStartTimeStr} from '@/utils/date';
import {getDataList, getDevice, getPropertyServiceList,} from '@/api/nursing/device';
import SwitchBar from '@/components/switchBar/switchBartop.vue';
import SwitchTabBar from '@/components/switchBar/switchBar.vue';
import LookData from './components/runLookData.vue';

const route = useRoute();
const router = useRouter();
const iotId = ref('');
const productKey = ref('');
const activeIndex = ref(0);
const activeModelIndex = ref(0);
const isActive = ref(0);
const dialogVisible = ref(false);
const listLookData = ref([]);
const eventListData = ref([]);
const dataLoading = ref(false);
const baseData = ref({});
const publishedData = ref([]);
const statusObj = ref({});
const eventObj = ref({
  startTime: dayjs().subtract(1, 'hours').format('YYYY-MM-DD HH:mm:ss'),
  endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
});
const locationData = ref([]);
const nextValid = ref(null);
const preValid = ref(null);
const dateData = ref(null);
const isNext = ref(false);
const nextEndTime = ref(null);
const timeValue = ref(0);
const typeValue = ref(0);
const time = ref([]);
const isUpdate = ref(false);

const paginationLook = ref({
  pageSize: 5,
  pageNum: 1,
  startTime: dayjs().subtract(1, 'hours').format('YYYY-MM-DD HH:mm:ss'),
  endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
});
const rowKey = 'index';
const itemData = ref([]);
const pagination = ref({
  pageSize: 10,
  pageNum: 1,
});
const total = ref(0);

onMounted(() => {
  if (route.query.iotId !== undefined) {
    iotId.value = route.query.iotId;
    productKey.value = route.query.productKey;
    getDetails();
  }
});

// 获取详情数据
const getDetails = async () => {
  const params = {
    iotId: iotId.value,
    productKey: productKey.value,
  };
  const res = await getDevice(params);
  if (res.code === 200) {
    baseData.value = res.data;
    paginationLook.value.deviceId = baseData.value.iotId;
    paginationLook.value.deviceName = baseData.value.deviceName;
    if (baseData.value.remark) {
      locationData.value = baseData.value.remark.split(',');
    }
    getPropertyStatus(baseData.value);
  }
};

// 详情运行状态状态的卡片
const getPropertyStatus = async (basedata) => {
  statusObj.value = {
    ...statusObj.value,
    deviceName: basedata.deviceName,
    productKey: productKey.value,
  };
  const res = await getPropertyServiceList(basedata.iotId);
  if (res.code === 200) {
    const data = res.data;
    publishedData.value = data;
  }
};

// 获取运行状态列表的查看数据
const getLookList = async (val) => {
  const res = await getDataList(paginationLook.value);
  if (res.code === 200) {
    const data = res.rows;
    listLookData.value = data;
    total.value = res.total;
    paginationLook.value.total = res.total;
  }
};

// 时间筛选分页回到第一页
const onPage = () => {
  paginationLook.value.pageNum = 1
}

// tab切换
const changeId = (val) => {
  activeIndex.value = val;
};

// 模型数据
const changeModelId = (val) => {
  activeModelIndex.value = val;
  getPublished(baseData.value);
};

// 触发默认模块
const handleActive = (i, item) => {
  isActive.value = i;
  isNext.value = false;
  isUpdate.value = true;
  eventListData.value = [];
  if (i > 0 && item !== undefined) {
    statusObj.value.functionBlockId = item.functionBlockId;
  } else {
    delete statusObj.value.functionBlockId;
  }
  getPublished(baseData.value);
};

const onPageChange = (val) => {
  pagination.value.pageNum = val.current;
  pagination.value.pageSize = val.pageSize;
};

// 打开查看数据弹层
const handleDetails = (row) => {
  paginationLook.value.functionId = row.functionId;
  dialogVisible.value = true;
  getLookList();
};

// 关闭查看数据弹层
const handleCloseDialog = () => {
  dialogVisible.value = false;
  paginationLook.value.startTime = dayjs().subtract(1, 'hours').format('YYYY-MM-DD HH:mm:ss');
  paginationLook.value.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
  getLookList();
};

// 查看数据时间范围筛选
const handleLookSearch = (val) => {
  preValid.value = true;
  const pageLook = paginationLook.value;
  delete pageLook.startTime;
  delete pageLook.endTime;
  pageLook.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss'); // 结束时间，现在的时间
  pageLook.startTime = dayjs().subtract(val, 'hours').format('YYYY-MM-DD HH:mm:ss');
  switch (val) {
    case '1':
      dateData.value = 60 * 60 * 1000;
      break;
    case '24':
      dateData.value = 24 * 60 * 60 * 1000;
      break;
    case '7':
      pageLook.startTime = dayjs().subtract(val, 'days').format('YYYY-MM-DD HH:mm:ss');
      dateData.value = 7 * 24 * 60 * 60 * 1000;
      break;
    default:
      dateData.value = null;
      pageLook.startTime = getStartTimeStr(val[0]);
      pageLook.endTime = getEndTimeStr(val[1]);
  }
  getLookList();
};

// 重置，清空搜索框
const handleLookReset = () => {
  paginationLook.value = {
    pageSize: 5,
    pageNum: 1,
  };
  getLookList();
};

// 翻页设置当前页
const getCurrent = (val) => {
  paginationLook.value.pageNum = val.current;
  paginationLook.value.pageSize = val.pageSize;
  getLookList();
};
</script>
<style lang="scss" scoped src="./index.scss"></style>
